<template>
  <div style="background-color: aquamarine">
    <h3>自定义事件通信</h3>
    <hr />
    <!-- 2.把下边创建的child交给组件的ref属性,则这个child就保存了当前的实例 -->
    <Child ref="child"/>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Event",
});
</script>

<script setup lang="ts">
import Child from "./Child.vue";
import {ref , onMounted} from "vue"

//1.先创建一个名字叫做child的数据
const child = ref()

/* 
  我们通过ref拿子组件的内容的时候,必须写在onMounted后的生命周期函数中,否则子组件还没有挂载完成
*/
onMounted(() => {
  console.log(child.value.count);
})
</script>
